<!DOCTYPE html>
<html>
<head>
<%include("../../tpl/head.html"){}%>
<title>后台管理-角色管理</title>
</head>
<body class="hold-transition fixed skin-blue sidebar-mini">
	<div class="wrapper">
		<!-- 头部 -->
		<%include("../../tpl/header.html"){}%>
		<!-- 网页正文 -->
		<div class="content-wrapper">
			<!-- 网页正文-面包屑 -->
			<section class="content-header">
				<h1>角色管理</h1>
				<ol class="breadcrumb">
					<li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
					<li><a href="#">系统管理</a></li>
					<li class="active">角色户管理</li>
				</ol>
			</section>
			<!-- 网页正文-主体 -->
			<section class="content">
				<div class="row">
					<div class="col-sm-7">
						<div class="box box-solid">
							<div class="box-header with-border">
								<h3 class="box-title">角色列表</h3>
							</div>
							<div class="box-body">
								<table id="data-table" class="table table-bordered table-striped table-hover">
									<thead>
										<tr>
											<th>角色名称</th>
											<th>标示</th>
											<th></th>
										</tr>
									</thead>
								</table>
							</div>
							<div class="box-footer clearfix">
								<button type="button" class="btn btn-primary btn-sm" id="role-add">添加</button>
							</div>
						</div>
					</div>
					<div class="col-sm-5">
						<div class="box box-solid">
							<div class="box-header with-border">
								<h3 class="box-title">角色编辑</h3>
							</div>
							<form class="form-horizontal" action="save.json?oper=${_oper!'add'}">
								<div class="box-body">
									<div class="form-group form-group-sm hide">
										<label class="col-lg-3 col-md-4 col-sm-4 control-label">ID</label>
										<div class="col-lg-6 col-md-7 col-sm-8">
											<input type="text" class="form-control input-sm" name="id" placeholder="请输入ID">
										</div>
									</div>
									<div class="form-group form-group-sm">
										<label class="col-lg-3 col-md-4 col-sm-4 control-label">角色名</label>
										<div class="col-lg-6 col-md-7 col-sm-8">
											<input type="text" class="form-control input-sm" name="name" placeholder="请输入角色名" required>
										</div>
									</div>
									<div class="form-group form-group-sm">
										<label class="col-lg-3 col-md-4 col-sm-4 control-label">角色标识</label>
										<div class="col-lg-6 col-md-7 col-sm-8">
											<input type="text" class="form-control input-sm" name="identity" placeholder="请输入角色标识" required>
										</div>
									</div>
									<div class="form-group form-group-sm">
										<label class="col-lg-3 col-md-4 col-sm-4 control-label">资源配置</label>
										<div class="col-lg-6 col-md-7 col-sm-8">
											<div class="text-center">正在获取...</div>
											<ul id="treeDemo" class="ztree"></ul>
										</div>
									</div>
								</div>
								<div class="box-footer clearfix">
									<div class="row">
										<div class="col-lg-6 col-md-7 col-sm-8 col-lg-offset-3 col-md-offset-4 col-sm-offset-4">
											<button type="submit" class="btn btn-info">提交</button>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</section>
			<!-- /.content -->
		</div>
		<!-- 网页底部 -->
		<%include("../../tpl/footer.html"){}%>
	</div>
	<%include("../../tpl/script.html"){}%>
	<script type="text/javascript">
		$(document).ready(function() {
			// 初始化表格
			var dataTable = $('#data-table').DataTable({
				'info' : false,
				'paging' : false,
				'columns' : [ {
					'data' : 'name'
				}, {
					'data' : 'identity'
				}, {
					'width' : '60px',
					'render' : function(data, type, full, meta) {
						return laytpl($('#operation_buttons').html()).render(full);
					}
				} ]
			});
			// 绑定表格点击事件
			$('#data-table').on('click', 'tr button[event-click="delGridRow"]', function() {
				var _this = $(this);

				var layer_c = layer.confirm('确定要删除该角色？', {
					btn : [ '确定', '取消' ]
				}, function() {
					$.getLoading('save.json?oper=del&id=' + _this.data('id'), function() {
						dataTable.row(_this.parents('tr')).remove().draw();
						layer.close(layer_c);
					});
				}, function() {
					layer.close(layer_c);
				});
				return false;
			}).on('click', 'tr', function() {
				$(this).addClass('success').siblings('.success').removeClass('success');

				$('form').triggerHandler('data-init', [ 'edit', this ]);
			});

			$('#role-add').on('click', function() {
				$('form').triggerHandler('data-init', [ 'add' ]);
			});

			//　表单数据加载事件
			$('form').on('data-init', function(e, oper, rowTr) {
				var _this = $(this);
				_this.data('row', rowTr || false);
				_this.data('oper', oper || 'add');

				// 加载表单	
				var data = ((!!rowTr) ? (dataTable.row(rowTr).data()) : {});

				_this.find('input').each(function() {
					$(this).val(data[this.name] || '');
				});
				// 加载资源树形图
				$.fn.zTree.destroy();
				$.postLoading('permissions.json', {
					'id' : (data.id || '')
				}, function(result) {
					_this.data('ztree', $.fn.zTree.init(_this.find('#treeDemo'), {
						check : {
							enable : true
						}
					}, result.data));

					_this.find('div.text-center').hide();
				}, function(err) {
					_this.find('div.text-center').text(err.msg || "未知");
				});
			}).triggerHandler('data-init', [ 'add' ]);
			// 表单绑定校验&提交事件
			$('form').validate({
				submitHandler : function(form) {
					var _this = $(form);
					// 构造提交参数
					var param = $.extend({
						'_oper' : _this.data('oper'),
						'permissions' : {},
					}, _this.serializeJson());
					// 获取权限配置
					$.each(_this.data('ztree').getNodesByFilter(function(node) {
						return node.checked && !node.permissionNode;
					}), function() {
						if (this.bottomNode) {
							param.permissions[this.id] = $.map(this.children, function(pemNode) {
								return pemNode.checked ? pemNode.id : undefined;
							}).join(',');
						} else {
							param.permissions[this.id] = 'view';
						}
					});
					// JSON 提交数据
					$.jsonLoading('save.json?oper=json', param, function(result) {
						// 更新列表中的数据
						if (result.oper === 'edit') {
							dataTable.row(_this.data('row')).data(result.data).draw();
						} else if (result.oper === 'add') {
							dataTable.row.add(result.data).draw();
						}

						layer.msg("提交成功", {
							icon : 1,
							time : 1500
						});
					});
					return false;
				}
			});
		});
	</script>
	<script type="text/html" id="operation_buttons">
        <div class="btn-group btn-group-xs">
            <button type="button" class="btn btn-danger" event-click="delGridRow" data-id="{{d.id}}">删除</button>
        </div>
    </script>
</body>
</html>
